<template>
  <div>
    <div>
      <van-nav-bar title="记帐本" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div>
      <van-tabs @click="onClick">
        <van-tab>
          <template #title>
            <van-icon name="cash-back-record" />支出
            <van-tag v-if="items1_len!=0" color="#ffe1e1" text-color="#ad0000">{{items1_len}}</van-tag>
          </template>
          <van-collapse v-model="activeNames" v-for="item in items1" :key="item.index">
              <van-collapse-item
                :title="item.date"
                :value="item.money"
                :name="item"
              >{{item.content}}</van-collapse-item>
          </van-collapse>
          <div v-if="items1_len==0">
            <van-empty description="暂无支出" />
          </div>
        </van-tab>
        <van-tab>
          <template #title>
            <van-icon name="refund-o" />收入
            <van-tag v-if="items2_len!=0" color="#ffe1e1" text-color="#ad0000">{{items2_len}}</van-tag>
          </template>
          <van-collapse v-model="activeNames" v-for="item in items2" :key="item.index">
            <div>
              <van-collapse-item
                :title="item.date"
                :value="item.money"
                :name="item"
              >{{item.content}}</van-collapse-item>
            </div>
          </van-collapse>
            <div v-if="items2_len==0">
              <van-empty description="暂无收入" />
            </div>
        </van-tab>
        <van-tab>
          <template #title>
            <van-icon name="paid" />借还
            <van-tag v-if="items3_len!=0" color="#ffe1e1" text-color="#ad0000">{{items3_len}}</van-tag>
          </template>
          <van-collapse v-model="activeNames" v-for="item in items3" :key="item.index">
            <div>
              <van-collapse-item
                :title="item.date"
                :value="item.money"
                :name="item"
              >{{item.content}}</van-collapse-item>
            </div>
          </van-collapse>
            <div v-if="items3_len==0">
              <van-empty description="暂无借还" />
            </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import { NavBar } from "vant";
import { Tab, Tabs } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Empty } from "vant";
import { Tag } from 'vant';

Vue.use(Tag);
Vue.use(Empty);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(NavBar);
export default {
  name: "Notepad",
  created() {
    this.getNotepad();
  },
  data: () => ({
    activeNames2: ["0"],
    activeNames: ["0"],
    activeNames3: ["0"],
    items1: [],
    items2: [],
    items3: [],
    items1_len: 0,
    items2_len: 0,
    items3_len: 0
  }),
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    async getNotepad() {
      const { data: res } = await this.$http.get("/api/find/allLedgerByUid", {
        params: { uid: sessionStorage.getItem('uid') }
      });
      this.items1 = res.data.type1;
      this.items2 = res.data.type2;
      this.items3 = res.data.type3;
      this.items1_len = this.items1.length;
      this.items2_len = this.items2.length;
      this.items3_len = this.items3.length;

      console.log(this.items1_len);
    },
    onClick(name, title) {
      // Toast(title);
      console.log("111");
    },
    timeFormat(date) {
      let date1 = new Date(date);
      // console.log("date", date1);
      // console.log(moment(date).format("YYYY-MM-DD dddd hh:mm:ss"));
      return moment(date).format("YYYY-MM-DD hh:mm:ss");
    }
  }
};
</script>
<style scoped>
</style>